<script setup>
import { ref, provide, onMounted } from 'vue';
import MyTable from '@/components/MyTable/MyTable.vue';
import api from '@/api/index.js'
import ImageView from '@/components/ImageView/ImageView.vue'

const props = defineProps({
  machineId: {
    type: [Number, String],
    default: ''
  }
})

// 表格列配置
const columns = ref([
  { ellipsis: true, title: '接单时间', dataIndex: 'receiveTime', key: 'receiveTime', },
  { ellipsis: true, title: '内容', dataIndex: 'serviceContent', key: 'serviceContent', },
  { ellipsis: true, title: '损坏图片', key: 'badImages', },
  { ellipsis: true, title: '维修图片', key: 'workImages', },
  { ellipsis: true, title: '接单人姓名', dataIndex: 'serviceUserName', key: 'serviceUserName', },
  { ellipsis: true, title: '备注', dataIndex: 'serviceRemark', key: 'serviceRemark', },
])

const tableData = ref([])

onMounted(async () => {
  const { data: { records } } = await api.getOrdList({
    orderType: 1,
    machineId: props.machineId,
    size: 9999
  })
  tableData.value = records
})
provide('columns', columns.value)
provide('tableData', tableData)
</script>

<template>
  <MyTable :pagination="false" :scroll="{ y: 'calc(100vh - 383px)' }">
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'badImages' && record.badImages">
        <ImageView :value="record.badImages" />
      </template>
      <template v-if="column.key === 'workImages' && record.workImages">
        <ImageView :value="record.workImages" />
      </template>
    </template>
  </MyTable>
</template>